<template>
  <div class="page-list-live">
    <PageList>
      <template #header>客户端管理</template>
      <!-- 表单搜索 -->
      <template #filter>
        <ListFilter :form="topFilter" :key-list="keyList" @search="search" @changItemHandler="changItemHandler" @reset="handleReset" />
      </template>
      <template #tips>
        <el-button icon="el-icon-document-add" type="primary" class="box" @click="handleAdd">新增</el-button>
      </template>
      <template #table>
        <ListTable ref="clientTable" :loading="tableLoading" :table-data="tableData" :table-col="tableCol">
          <template slot="col1" slot-scope="scope">
            <el-button :loading="scope.row.loadingDel" size="mini" icon="el-icon-edit" type="text" @click="handleRowEdit(scope.row)">编辑名称</el-button>
            <el-button :loading="scope.row.loadingDel" size="mini" icon="el-icon-delete" style="color: red" type="text" @click="handleRowDel(scope.row)">删除</el-button>
            <el-button :loading="scope.row.loadingDel" size="mini" icon="el-icon-s-grid" type="text" @click="handleRowConfig(scope.row)">应用配置</el-button>
          </template>
        </ListTable>
      </template>
    </PageList>
    <ApplicationConfig ref="ApplicationConfig" />
    <AddClientDialog ref="AddClientDialog" @getList="getList" />
  </div>
</template>

<script>
import listMixin from '@/mixins/list'
import ListFilter from '@/components/ListFilter'
import ApplicationConfig from './components/ApplicationConfig'
import AddClientDialog from './components/AddClientDialog'
import { tenant, tenantDel } from '@/api/Tenant'
export default {
  components: {
    ListFilter,
    ApplicationConfig,
    AddClientDialog
  },
  mixins: [listMixin],
  data() {
    return {
      tableCol: [
        { type: 'index', label: '序号', width: '100px' },
        { prop: 'tenantName', label: '客户端名称', minWidth: '100px' },
        { prop: 'code', label: '序列号', minWidth: '100px' },
        { label: '操作', custom: 'col1' }
      ],
      tableLoading: true,
      tableData: [],
      topFilter: {
        keyword: {
          label: '客户端名称',
          placeholder: '请输入客户端名称',
          type: 'input'
        }
      },
      keyList: ['tenantName']
    }
  },
  methods: {
    search(obj) {
      this.getList(obj)
    },
    changItemHandler() {},
    // 新增
    handleAdd() {
      this.$refs['AddClientDialog'].getMenuList()
      this.$refs['AddClientDialog'].open()
    },
    async getList(query) {
      const obj = query || {
        pageIndex: 1,
        pageSize: 10,
        orderBy: 'createdTime',
        orderByAscent: false
      }
      if (!obj.orderBy) {
        obj.orderBy = 'createdTime'
        obj.orderByAscent = false
      }
      const {
        data: { items, pageIndex, count }
      } = await tenant(obj)
      this.tableLoading = false
      this.tableData = items
      this.$nextTick(() => {
        this.$refs['clientTable'].update({ pageIndex, count })
        this.tableLoading = false
      })
    },
    async handleRowEdit(row) {
      await this.$refs['AddClientDialog'].getMenuList()
      this.$refs['AddClientDialog'].open(row)
    },
    delRowReq(row) {
      tenantDel({ id: row.id })
        .then(() => {
          row.loadingDel = false
          this.getList()
          this.$message({
            type: 'success',
            message: '删除成功'
          })
        })
        .catch((err) => {
          row.loadingDel = false
          this.$message({
            type: 'error',
            message: '删除失败'
          })
          console.error('handleRowDel err: ', err)
        })
    },
    handleRowDel(row) {
      row.loadingDel = true
      this.$_delConfirm(
        '当前客户端',
        () => {
          this.delRowReq(row)
        },
        () => {
          row.loadingDel = false
        }
      )
    },
    handleRowConfig(row) {
      this.$refs['ApplicationConfig'].openHandler(row)
    }
  }
}
</script>

<style lang='scss' scoped>
  .el-button:focus,
  .el-button:focus:hover {
    color: #586aa6 !important;
  }
  .box:focus:hover {
    color: #fff !important;
  }
</style>
